{% extends "base.html" %}
{% block page_title %}Update Project{% endblock %}
{% load static %}
{% load render_bundle from webpack_loader %}

{% block content %}
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="card">
      <div class="cardface">
        {{ form.media.css }}
        <form action="." method="post" enctype="multipart/form-data">
          {% csrf_token %}

          <h1>Data Upload Instructions</h1>
          <h3>Description</h3>
          <p>Time to upload your data! Please upload a data file that contains text (and optionally labels) for your project. To upload, the file <strong>must pass the following checks:</strong></p>
          <ul class="list-group">
            <li class="list-group-item">The file needs to have either a <code>.csv</code> or <code>.tsv</code> file extension.</li>
            <li class="list-group-item">The file requires the data to be formatted into two columns, with header names <code>Text</code> and <code>Label</code> OR three columns with header names <code>ID</code> <code>Text</code> and <code>Label</code>.</li>
            <li class="list-group-item">The largest file size supported is 500MBs.</li>
          </ul>
          <p>The (optional) <code>ID</code> column should contain a <b>unique</b> identifier for your data. The identifiers should be no more than 128 characters.</p>
          <p>The <code>Text</code> column should contain the text you wish users to label. For example, if you are building a sentiment analysis model to predict whether a tweet is positive, negative, or neutral, the <code>Text</code> column would contain the tweets.</p>
          <p>The <code>Label</code> column should contain any pre-exisiting labels for the corresponding text. If none of your data contains existing labels, then this column can be left blank. Extending our sentiment analysis example, if a lead coder has already annotated some tweets as positive, negative, or neutral, this column would contain those labeled records.</p>
          <p><i>Data Upload Notes:</i></p>
          <ul class="list-group">
            <li class="list-group-item">SMART restricts your project to having two million unique records.</li>
            <li class="list-group-item">If there are multiple rows with the same Text, only one of the records will be saved.</li>
            <li class="list-group-item">SMART will keep up to two million unique records per data set.</li>
          </ul>
          {% if num_data < 2000000 %}
          <div class="form-group">
            <label class="control-label" for="{{ form.data.id_for_label }}">{{ form.data.label }}</label>
            <input class="form-control" id="{{ form.data.id_for_label }}" maxlength="30" name="{{ form.data.html_name }}" type="file" placeholder="{{ form.data.label }}" />
            <div class="error-messages">{{ form.data.errors }}</div>
          </div>
          {% else %}
          <div>
            <p>You already have two million unique data objects for this project, you can not upload additional data.</p>
          </div>
          {% endif %}
          <button class="btn btn-primary" type="submit">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}
